<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '0px',
    }"
  >
    <div class="wrap-other-roll">
      <!-- 精选服务 -->
      <div class="card">
        <div class="title">
          精选服务
          <el-button style="float: right; padding: 0" type="text" @click="add"
            >添加服务</el-button
          >
        </div>
        <el-form :inline="true" :model="form" class="demo-form-inline more">
          <el-form-item label="更多跳转地址" required>
            <el-input
              v-model="form.moreUrl"
              maxlength="200"
              type="textarea"
              :rows="2"
              resize="none"
              style="width: 245px"
              placeholder="请输入更多跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="详情跳转地址" required>
            <el-input
              v-model="form.detailUrl"
              maxlength="200"
              type="textarea"
              :rows="2"
              resize="none"
              style="width: 245px"
              placeholder="请输入详情跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="获取数据个数" required>
            <el-input-number
              v-model="form.num"
              controls-position="right"
              :min="1"
              :max="20"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <div class="service" v-for="(item, index) in arr" :key="index">
          <el-card shadow="always">
            <div class="service-remove">
              <el-button type="danger" size="mini" @click="remove(item)"
                >删除</el-button
              >
            </div>
            <div class="service-img">
              <web-upload
                @upload="(e) => upload(e, item)"
                :size="[505, 425]"
                accept="image/*"
              />
              <img :src="item.logo" />
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入服务名称"
                v-model="item.name"
                clearable
                maxlength="50"
              >
              </el-input>
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入服务链接"
                v-model="item.linkUrl"
                clearable
                maxlength="100"
              >
              </el-input>
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入服务商名称"
                v-model="item.shopName"
                clearable
                maxlength="50"
              >
              </el-input>
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入服务价格"
                v-model="item.price"
                clearable
                maxlength="20"
              >
              </el-input>
            </div>
            <div style="margin-top: 10px">
              <el-cascader
                ref="cascader"
                v-model="item.region"
                :options="regionOption"
                :props="{
                  value: 'code',
                  label: 'name',
                  children: 'areaList',
                  expandTrigger: 'hover',
                }"
                placeholder="请选择服务区域"
                style="width: 100%"
              ></el-cascader>
            </div>
            <div>
              <el-input-number
                style="width: 100%; margin-top: 10px"
                v-model="item.sort"
                controls-position="right"
                :min="1"
                :max="100"
                placeholder="请输入排序"
              ></el-input-number>
            </div>
          </el-card>
        </div>
      </div>
      <div style="text-align: center; padding-bottom: 20px">
        <span
          class="wrap-btn wrap-success"
          v-if="$checkPermission(101)"
          @click="save"
          >保存</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      regionOption: [],
      form: { num: 8 },
      arr: [],
    }
  },
  created() {
    this.regionList()
    this.itemList()
  },
  methods: {
    regionList() {
      // 获取服务区域
      this.$axios.get('/admin/devision/get?code=620000').then((data) => {
        this.regionOption = []
        if (data.code == 200) {
          this.regionOption[0] = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    itemList() {
      // 获取详情
      this.$axios.get('/admin/mobile/findPortalSuggest?type=1').then((data) => {
        this.form = { num: 8 }
        this.arr = []
        if (data.code == 200) {
          if (data.data) {
            this.form = data.data.item
            this.arr = data.data.selfProduct || []
            this.arr.forEach((element) => {
              element.region = [
                `${element.areaCode.substring(0, 2)}0000`,
                `${element.areaCode.substring(0, 4)}00`,
                element.areaCode,
              ]
            })
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    add() {
      this.arr.push({
        logo: '',
        name: '',
        linkUrl: '',
        shopName: '',
        price: '',
        region: [],
        sort: '1',
      })
    },
    remove(item) {
      const index = this.arr.indexOf(item)
      if (index !== -1) {
        this.arr.splice(index, 1)
      }
    },
    upload(data, item) {
      //上传图片
      item.logo = data.fileDomain + data.url
    },
    save() {
      //保存
      if (!this.form.moreUrl) {
        this.$message.error('请输入更多跳转地址')
        return
      }
      if (!this.form.detailUrl) {
        this.$message.error('请输入详情跳转地址')
        return
      }
      if (!this.form.num) {
        this.$message.error('请输入获取数据个数')
        return
      }
      const arr = []
      this.arr.forEach((element) => {
        if (element.logo == '') {
          arr.push('请上传服务图片')
        }
        if (element.name == '') {
          arr.push('请输入服务名称')
        }
        if (element.linkUrl == '') {
          arr.push('请输入服务链接')
        }
        if (element.shopName == '') {
          arr.push('请输入服务商名称')
        }
        if (element.price == '') {
          arr.push('请输入服务价格')
        }
        if (element.region.length == 0) {
          arr.push('请选择服务区域')
        }
        element.areaCode = element.region[2]
        if (!element.sort) {
          arr.push('请输入排序')
        }
      })
      if (arr.length > 0) {
        this.$message.error(arr[0])
        return
      }
      this.$axios
        .post('/admin/mobile/addPortalSuggest', {
          data: {
            item: this.form,
            selfProduct: this.arr,
          },
          type: 1,
        })
        .then((data) => {
          if (data.code == 200) {
            this.$message.success('操作成功！')
            this.itemList()
          } else {
            this.$message.error(data.msg)
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
  }
  .el-card {
    margin-top: 20px;
  }
  .service {
    width: 490px;
    display: inline-block;
    margin-right: 20px;
    position: relative;
    &-remove {
      position: absolute;
      top: 40px;
      right: 20px;
      z-index: 1999;
    }
    &-img {
      position: relative;
      img {
        display: block;
        position: absolute;
        top: 0;
        left: 100px;
        max-height: 82px;
        max-width: 345px;
      }
    }
    &-input {
      .el-input {
        width: 100%;
        margin: 10px 10px 0 0;
      }
    }
  }
  .cover-img {
    display: block;
    position: absolute;
    top: 0;
    left: 100px;
    max-height: 82px;
  }
  .more {
    margin-top: 20px;
  }
}
</style>
